import React, { useState } from 'react'
import http from '../../utils/http'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import styles from './index.module.css'
import { NavBar, Popup, Tag, Steps } from 'antd-mobile'
function Index() {
    const { Step } = Steps
    const navigate = useNavigate()
    const [visible1, setVisible1] = useState(false)
    const [visible2, setVisible2] = useState(false)
    const [sq] = useSearchParams()
    const price = sq.get('price')
    const { state } = useLocation()

    const handlePay = async () => {
        // 调用支付接口
        const res = await http.get('/api/pay', {
            params: {
                // 获取需要付款的数据名称
                title: '支付成功',
                 // 获取需要付款的数据ID
                id: Date.now(),
                 // 获取需要付款的数据价格
                price: price
            }
        })

        const { code, data } = res.data

        if (code === 200) {
            // 调用成功跳转相对应的支付页面
            window.location.href = data
        }
    }
    return (
        <div>
            <div>
                <div><NavBar onBack={() => navigate(-1)}>订单详情</NavBar></div>
                <div>
                    {/* <ProgressBar
                        percent={50}
                        style={{
                            '--track-width': '4px',
                        }}
                    /> */}
                </div>
                <div>
                    <div className={styles.id_wroe}>
                        订单编号:{state.id}
                    </div>
                    <div className={styles.top_wroe}>
                        <div className={styles.left_wroe}>
                            <span>{state.start}</span>
                            <span>{state.startTime}</span>
                            <span>{state.end}</span>
                            <span>{state.isSeat ? <Tag color='warning'>有票</Tag> : <Tag color='danger'>无票</Tag>}</span>
                            <span>{state.isSpeed ? <Tag color='primary'>高铁</Tag> : <Tag color='success'>火车</Tag>}</span>
                            <span>5张</span>
                            <div className={styles.Tags_wroe}>
                                <Tag onClick={() => setVisible1(true)}>经停站</Tag>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={styles.bottom_wroe}>
                    <div className={styles.btn_wroe} onClick={() => setVisible2(true)}>
                        支付订单
                    </div>
                </div>
            </div>
            <Popup
                visible={visible1}
                showCloseButton
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
            >
                <div>
                    <div className={styles.title_wroe}>
                        <h2>G101时刻表</h2>
                    </div>
                    <div>
                        <Steps direction='vertical'>
                            <Step
                                title='北京'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='石家庄'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='河南'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='四川'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='重庆'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='成都'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                            <Step
                                title='广州'
                                status='finish'
                                description='完成时间:2020-12-01 12:30'
                            />
                        </Steps>
                    </div>
                </div>
            </Popup>
            <Popup
                visible={visible2}
                onMaskClick={() => {
                    setVisible2(false)
                }}
                onClose={() => {
                    setVisible2(false)
                }}
            >
                <div className={styles.box_wroe}>
                    <span className={styles.pay1_wroe} onClick={() => handlePay()}>支付宝</span>
                    <span className={styles.pay2_wroe}>微信</span>
                    <span className={styles.pay3_wroe}>云闪付</span>
                </div>
            </Popup>
        </div>
    )
}

export default Index
